
import BaseView from "./baseView.js";

export default class shouye extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/yingyuanxiangqing.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header>
            <nav class="H-nav layout">
                <div class="layout H-left-div">
                    <a href="#/homepages">
                        <p class="log">
                            <span class="text aaa">猫眼电影</span>
                            <span class="beijin"></span>
                            <span class="faguang"></span>
                        </p>
                    </a>
                    <div class="layout">
                    <span>成都
                    <ol>
                        <li class="layout">
                            <span>区:</span><a href="">武侯</a><a href="">郫都</a><a href="">双流</a><a href="">金牛</a>
                        </li>
                    </ol>
                </span>
                    </div>
                    <ul class="layout H-link">
                        <li class="layout">
                            <a href="#/homepages">首页</a>
                        </li>
                        <li class="layout">
                            <a href="#/movies">电影</a>
                        </li>
                        <li class="layout">
                            <a href="#/yingyuans">影院</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">榜单</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">热点</a>
                        </li>
                    </ul>
                </div>
                <div class="H-right-div layout">
                    <form action="">
                        <input type="text" placeholder="找影视剧、影人、影院">
                    </form>
                    <div class="register">
                        <div>
                            <div class="yuan">
                                <div class="you">
                                </div>
                                <div class="zhongjian">
                                    <p>
                                        <a href="#/logins">登录</a>
                                        <a href="#/dingdans">我的订单</a>
                                    </p>
                                </div>
                                <div class="zuo">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <section class="poster-1">
            <!-- 海报 -->
            <header class="poster">
                <ul class="layout">
                    <li class="poster-left layout layoutyingyuan">
                        
                    </li>
                    <li class="poster-right layout">
                        <label for=""><input type="button" value="点击查询地址"><i></i></label>
                    </li>
                </ul>
            </header>
        </section>
        <!-- 内容 -->
        <main class="main">
            <section class="composing" >
                <ul class="layout dianyingliebiao">
                    
                </ul>
            </section>
            <article class="message">
                <section class="messageone">
    
                </section>
                <section class="messagetwo">
                    <form action="">
                        <p>观影时间: <input type="button" value="今天12月17日">
                            <input type="button" value="明天12月18日">
                            <input type="button" value="后天天12月19日">
                            <input type="button" value="周四天12月20日">
                        </p>
                    </form>
                    <ul class="xuanzuo">
                        <li class="layout">
                            <p>放映时间</p>
                            <p>语言版本</p>
                            <p>放映厅</p>
                            <p>售价(元)</p>
                            <p>选座购票</p>
                        </li>
                        <li class="layout">
                            <div>
                                <p>13:45</p>
                                <span>15:08散场</span>
                            </div>
                            <p>日语</p>
                            <p>放映厅2</p>
                            <p><span>￥</span>30</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>14:50</p>
                                <span>16:08散场</span>
                            </div>
                            <p>国语</p>
                            <p>放映厅1</p>
                            <p><span>￥</span>40</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>15:05</p>
                                <span>17:20散场</span>
                            </div>
                            <p>国语</p>
                            <p>放映厅4</p>
                            <p><span>￥</span>43</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>16:35</p>
                                <span>18:10散场</span>
                            </div>
                            <p>国语</p>
                            <p>放映厅3</p>
                            <p><span>￥</span>33.2</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>17:45</p>
                                <span>20:08散场</span>
                            </div>
                            <p>日语</p>
                            <p>放映厅6</p>
                            <p><span>￥</span>28</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>18:25</p>
                                <span>20:18散场</span>
                            </div>
                            <p>日语</p>
                            <p>放映厅5</p>
                            <p><span>￥</span>31</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>20:45</p>
                                <span>22:19散场</span>
                            </div>
                            <p>日语</p>
                            <p>放映厅10</p>
                            <p><span>￥</span>32.8</p>
                            <input type="button" value="选座购票">
                        </li>
                        <li class="layout">
                            <div>
                                <p>21:35</p>
                                <span>23:10散场</span>
                            </div>
                            <p>日语</p>
                            <p>放映厅8</p>
                            <p><span>￥</span>43</p>
                            <input type="button" value="选座购票">
                        </li>
                    </ul>
                </section>
                <section class="xiangguan">
                    <h1>相关影院</h1>
                    <ul class="layout layout123">
                        
                    </ul>
                </section>
            </article>
        </main>
        <!-- 底部 -->
        <footer>
            <nav>
                <ul class="layout">
                    <li>
                        <a href="#/homepages">关于我们</a>
                    </li>
                    <li>
                        <a href="#/homepages">管理团队</a>
                    </li>
                    <li>
                        <a href="#/homepages">投资者关系</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团网</a>
                    </li>
                    <li>
                        <a href="#/homepages">格瓦拉</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团下载</a>
                    </li>
                </ul>
            </nav>
            <p>商务合作邮箱：v@maoyan.com客服电话：10105335违法和不良信息举报电话：4006018900</p>
            <p>北京猫眼文化传媒有限公司</p>
        </footer>
        `)
    }

    handle() {
        //获取url参数
        function aa(qs) {
            var s = location.href;
            s = s.replace("?", "?&").split("&");
            var re = "";
            for (let i = 1; i < s.length; i++) {
                if (s[i].indexOf(qs + "=") == 0) {
                    re = s[i].replace(qs + "=", "")
                }
            } 
            return re
        }
        let movieId = aa("movieid")
        let yingyuanId = aa("yingyuanid")
        //渲染当前选中影院
        $.ajax({
            type: "post",
            url: "/api/platoon/getayingyuan",
            data: {
                "yingyuanid": yingyuanId
            },
            dataType: "json",
            success(data) {
                let str = `
                <img src="./img/yingyuan.jpg" alt="名侦探柯南">
                <div>
                    <h1>${data[0].name}</h1>
                    <p>${data[0].address}</p>
                    <p>${data[0].phone}</p>
                    <p>中国大陆</p>
                    <span>影院服务</span>
                    <p class="biaoqian1">未取票用户放映前60分钟可改签</p>
                    <p class="biaoqian2">为了您的观影安全，建议您自备或至影城购买独立包装3D眼镜，我们亦免费提供已消毒的3D眼镜。</p>
                    <p class="biaoqian3">未取票用户放映前60分钟可改签</p>
                    <p class="biaoqian4">未取票用户放映前60分钟可改签</p>
                </div>
                `
                $(".layoutyingyuan").html(str)
            }
        })
        //渲染电影
        $.ajax({
            type: "post",
            url: "/api/platoon/getallmovie",
            dataType: "json",
            success(data) {
                let str = "";
                let number = 1;
                data.forEach((item) => {
                    str += `
                    <li data-movieid=${item._id}>
                    <label for="com-${number}">
                        <input type="radio" id="com-${number}" name="com" class=${item._id}>
                        <img src="http://127.0.0.1:4000/photos/${item.images[0]}" alt="" data-movieid=${item._id}>
                        <div>
                            <i class="com-${number++}"></i>
                            <section class="messageone"> 
                            <h1>${item.cname}<span>8.<i>9分</i></span></h1>
                            <div class="layout">
                                <p><span>时长:</span>${item.time}分钟</p>
                                <p><span>类型:</span>${item.type}</p>
                                <p><span>主演:</span>${item.actor}</p>
                            </div>                             
                            </section>
                        </div>
                    </label>
                    </li>
                    `
                });
                $(".dianyingliebiao").html(str)
                $(`.${movieId}`).prop("checked", "checked")
            }
        })
        //渲染相关影院
        $.ajax({
            type: "post",
            url: "/api/platoon/getallcinemas",
            dataType: "json",
            success(data) {
                let str = ``
                data.forEach(item => {
                    str += `
                    <li data-yingyuanid=${item._id}><a href="javascript:;">${item.name}（${item.address}）</a></li>
                    `
                });
                $(".layout123").html(str)
            }
        })
        $(".layout123").on("click", "li", function () {
            window.location.hash = `#/yingyuanxiangqing?yingyuanid=${this.dataset.yingyuanid}`
        })
        //跳转选坐
        
        $(".xuanzuo").on("click", "input", function () {   
            let a111 = $('.dianyingliebiao input[type="radio"]:checked').attr('class')    
            window.location.hash = `#/xuanzuo?yingyuanid=${yingyuanId}&movieid=${a111}`
        })
    }
}